<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="../static/plugins/iview/styles/iview.css">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/widget.css">
    <link rel="stylesheet" href="../static/css/innerPage.css">

    <script src="../static/js/lodash.js"></script>

    <style>
        html,
        body {
            color: #495060;
        }
        
        #list-wrap {
            border: 1px #dddee1 solid;
            border-top: 2px #2d8cf0 solid;
            padding: 0px 15px;
        }
        
        .sc-container {
            margin-top: 20px;
        }
        
        #list-top-wrap {
            background-color: #f8f8f9;
            padding: 0;
            border: 1px #dddee1 solid;
        }
        
        #list-top-wrap .each {
            padding: 0px 30px;
            text-align: center;
            border-right: 1px #dddee1 solid;
            display: inline-block;
            cursor: pointer;
            height: 45px;
            line-height: 45px;
            color: #495060;
        }
        
        #list-top-wrap .each.active {
            color: #2c89eb;
        }
        
        #list-top-wrap .each .fa {
            color: #999;
        }
        
        #list-top-wrap .right_tips {
            color: #61c6d6;
            font-size: 12px;
            line-height: 45px;
            height: 45px;
            padding-right: 20px;
        }
        
        .each_detail {
            margin-top: 22px;
            margin-bottom: 20px;
        }
        
        .each_detail .header>div {
            display: inline-block;
            padding: 0px 10px;
            color: #80848f;
            font-size: 12px;
        }
        
        .each_detail .header .title {
            font-size: 16px;
            color: #1c2438;
            cursor: pointer;
            font-weight: bold;
        }
        
        .each_detail .header .title .fa {
            font-size: 18px;
            color: #E2E1E5;
        }
        
        .each_detail .subheader {
            height: 30px;
            line-height: 30px;
            padding: 10px 0px;
        }
        
        .each_detail .subheader>div {
            display: inline-block;
            padding: 0px 18px;
            font-size: 14px;
            border-right: 1px #dddee1 solid;
            height: 12px;
            line-height: 12px;
        }
        
        .each_detail .subheader>div:last-child {
            border-right: none;
        }
        
        .each_detail .subheader>div>span {
            color: #2d8cf0;
        }
        
        .each_detail .subheader>div:first-child {
            padding-left: 34px;
        }
        
        .each_detail .body {
            margin-top: 15px;
            line-height: 24px;
            padding-left: 34px;
        }
        
        .footer {
            margin-top: 10px;
            margin-left: 30px;
            padding-bottom: 22px;
        }
        
        .border_bottom {
            border-bottom: 1px #E2E1E5 solid;
        }
        
        .each_detail .footer .ivu-badge-count {
            background-color: white;
            color: #85cddb;
            border: 1px #85cddb solid;
            height: 24px;
            line-height: 22px;
            padding: 0px 10px;
            border-radius: 14px;
            cursor: pointer;
            font-size: 12px;
        }
        
        #list-pager-wrap {
            text-align: center;
        }
        
        .w1000 {
            width: 1000px!important;
        }
        
        #search-wrap label {
            display: inline-block;
            width: 80px;
            text-align: right;
            color: #495060;
            font-size: 12px;
        }
        
        #search-wrap .ivu-input-wrapper {
            width: 280px;
        }
        
        #list-pager-wrap {
            text-align: center;
        }
        
        .w1000 {
            width: 1000px!important;
        }
        
        .w1200 {
            width: 1200px!important;
        }
        
        #main-wrap {
            height: auto;
            border: 1px #dddee1 solid;
        }
        
        .tabs {
            border-bottom: 1px #dddee1 solid;
            height: 45px;
            background-color: white;
        }
        
        .tabs .tab {
            float: left;
            height: 45px;
            line-height: 45px;
            padding: 0px 28px;
            border-right: 1px #dddee1 solid;
            cursor: pointer;
        }
        
        .tabs .tab.active {
            color: white;
            background-color: #2d8cf0;
        }
        
        .top {
            padding: 10px;
            background: rgba(0, 153, 229, .7);
            color: #fff;
            text-align: center;
            border-radius: 2px;
        }
        
        .basicInfo td {
            color: #1c2438;
        }
        
        #main-content .left {
            float: left;
            height: 100%;
            background-color: #f8f8f9;
            border-right: 1px #dddee1 solid;
        }
        
        #main-content .left ul li {
            height: 50px;
            line-height: 50px;
            text-align: right;
            padding-right: 20px;
            color: #1c2438;
        }
        
        #main-content .left ul li.active {
            border-right: 2px #2d8cf0 solid;
            color: #2d8cf0;
        }
        
        .CodeMirror {
            min-height: 400px;
        }
    </style>

</head>

<body class="">


    <div class="sc-container w1200" id="app">


        <div id="list-wrap">

            <div class="each_detail" v-for="cl in componentList">
                <div class="header clearfix">
                    <div class="title" v-on:click.stop="changePageUrl(cl)">
                        <i class="fa fa-cube" style="color:#33cde5"> </i> {{cl.name}}
                    </div>
                    <div class="amount fr">调用次数：{{cl.callAmout}}次</div>
                    <div class="time fr">发布时间：{{cl.publicTime}}</div>
                </div>
                <div class="subheader clearfix">
                    <div class="category fl">业务分类：<span>{{cl.categoryName}}</span></div>
                    <div class="type fl">调用方式：<span>{{cl.callType}}</span></div>
                    <div class="validate fl">有效时间：<span>{{cl.valiateStart}} ~ {{cl.valiateEnd}}</span></div>
                    <div class="supplier fl">供应商：<span>{{cl.supplierName}}</span></div>
                </div>
                <div class="body clearfix">
                    <p> {{cl.instruction}}</p>
                </div>
                <div class="footer clearfix">
                    <Badge :count="b" style="margin-right:10px;" class-name="" v-for="b in cl.labels"></Badge>
                </div>
            </div>
        </div>

        <div id="main-wrap">
            <Affix>
                <div class="tabs">
                    <div class="tab" v-on:click.stop="tabClick(tab,index)" v-bind:class="{'active':tab.active}" v-for="(tab,index) in tabsList">{{tab.name}}</div>
                </div>
            </Affix>


            <div class="clearfix" id="main-content">
                <!-- <div class="wp20 left fl">
                    <ul>
                        <li class="active">API</li>
                        <li>调用说明</li>
                    </ul>
                </div> -->
                <!-- wp80 right fr -->
                <div class="">
                    <div class="form-wrap form-wrap-width-leftIcon clearfix" style="padding:20px;">

                        <div class="clearfix mt_20 mb_20 basicInfo">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>服务地址：</td>
                                        <td>http://10.32.200.32:8090
                                            <i-button v-on:click.stop="toDebug" type="info" style="background-color:#61c6d6;border-color:#61c6d6">在线调试</i-button>
                                            <i-button v-on:click.stop="toDemo" type="info" style="background-color:#61c6d6;border-color:#61c6d6">示例</i-button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>请求方法：</td>
                                        <td>GET/POST</td>
                                    </tr>
                                    <tr>
                                        <td>返回类型：</td>
                                        <td>JSON</td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>

                        <div class="clearfix widgetShow">

                            <div class="widget" id="00">
                                <div class="widget-header">
                                    <i class="fa fa-th-large widget-icon "></i>
                                    <span class="widget-caption ft-18">系统参数(Header 系统要求)</span>
                                    <div class="widget-buttons">
                                        <a href="#" data-toggle="collapse">
                                            <i class="fa fa-angle-double-up">&nbsp;</i>
                                            <span class="up_text">收起</span>
                                            <span class="down_text">展开</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="widget-body">
                                    <i-table stripe :columns="columns_01" :data="table_01"></i-table>
                                </div>
                            </div>

                            <div class="widget" id="01">
                                <div class="widget-header">



                                    <i class="fa fa-th-large widget-icon "></i>
                                    <span class="widget-caption ft-18">业务参数(组件本身要求)</span>
                                    <div class="widget-buttons">
                                        <a href="#" data-toggle="collapse">
                                            <i class="fa fa-angle-double-up">&nbsp;</i>
                                            <span class="up_text">收起</span>
                                            <span class="down_text">展开</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="widget-body">
                                    <i-table stripe :columns="columns_01" :data="table_02"></i-table>
                                </div>
                            </div>
                            <div class="widget" id="02">
                                <div class="widget-header">



                                    <i class="fa fa-th-large widget-icon "></i>
                                    <span class="widget-caption ft-18">代码示例</span>
                                    <div class="widget-buttons">
                                        <a href="#" data-toggle="collapse">
                                            <i class="fa fa-angle-double-up">&nbsp;</i>
                                            <span class="up_text">收起</span>
                                            <span class="down_text">展开</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="widget-body">



                                    <Tabs value="csharp">
                                        <Tab-pane label="C#示例" name="csharp">
                                            <textarea rows="30" cols="" id="csharpCode" placeholder="">
                                             </textarea>
                                        </Tab-pane>
                                        <Tab-pane label="Java示例" id="java">
                                            <textarea rows="30" cols="" id="javaCode" placeholder="">
                                            </textarea></Tab-pane>
                                    </Tabs>

                                </div>
                            </div>
                            <div class="widget" id="03">
                                <div class="widget-header">



                                    <i class="fa fa-th-large widget-icon "></i>
                                    <span class="widget-caption ft-18">返回参数</span>
                                    <div class="widget-buttons">
                                        <a href="#" data-toggle="collapse">
                                            <i class="fa fa-angle-double-up">&nbsp;</i>
                                            <span class="up_text">收起</span>
                                            <span class="down_text">展开</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="widget-body">
                                    <Tabs value="JSON">
                                        <Tab-pane label="JSON" name="JSON">
                                            <textarea rows="20" cols="" id="jsonCode">
                                            </textarea>
                                        </Tab-pane>

                                    </Tabs>
                                </div>
                            </div>

                            <div class="widget" id="04">
                                <div class="widget-header">



                                    <i class="fa fa-th-large widget-icon "></i>
                                    <span class="widget-caption ft-18">近回参数(组件本身要求)</span>
                                    <div class="widget-buttons">
                                        <a href="#" data-toggle="collapse">
                                            <i class="fa fa-angle-double-up">&nbsp;</i>
                                            <span class="up_text">收起</span>
                                            <span class="down_text">展开</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="widget-body">
                                    <i-table stripe :columns="columns_03" :data="table_03"></i-table>
                                </div>
                            </div>



                        </div>
                    </div>
                </div>
            </div>


        </div>




        <div id="page-bottom-wrap mb_20" class="clearfix">

        </div>



        <Back-top :height="100" :bottom="200">
            <div class="top">返回顶端</div>
        </Back-top>

    </div>



    <script src="../static/js/jquery.js"></script>


    <script src="../static/plugins/iview/vue.min.js"></script>

    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"> -->
    <script src="../static/plugins/iview/locale/zh-CN.js"></script>

    <script src="../static/plugins/iview/iview.min.js"></script>

    <script src="../static/js/suit.js"></script>

    <script src="../static/js/ba-resize.js"></script>

    <link rel="stylesheet" href="../static/plugins/codemirror/codemirror.css">
    <script src="../static/plugins/codemirror/codemirror.js"></script>
    <!-- <script src="../static/plugins/codemirror/mode/css/css.js"></script> -->
    <script src="../static/plugins/codemirror/mode/javascript/javascript.js"></script>
    <script src="../static/plugins/codemirror/mode/clike/clike.js"></script>
    <link rel="stylesheet" href="../static/plugins/codemirror/theme/monokai.css">

    <script>
        Vue.mixin({
            methods: {
                //当前打开还是新窗口打开切换
                ChangeHasTop: function() {

                    var a = window.parent.app.changeHasTop(true);

                },
                //当前打开还是新窗口打开切换
                openUrlNewWidow: function(url) {
                    url = url || window.location.href;
                    window.open(url); //在另外新建窗口中打开窗口
                }
            }
        })


        var app = new Vue({
            el: '#app',
            data: {

                componentList: [{
                    name: '建设项目信息-ProjectInfo',
                    publicTime: '2010-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '1',
                    categoryName: '环境监控',
                    callType: 'WebService',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }],
                tabsList: [{
                    name: '基本信息',
                    active: true
                }, {
                    name: '系统参数',
                    active: false
                }, {
                    name: '业务参数',
                    active: false
                }, {
                    name: '代码示例',
                    active: false
                }, {
                    name: '返回参数',
                    active: false
                }],
                columns_01: [{
                    title: '参数名',
                    key: 'name'
                }, {
                    title: '类型',
                    key: 'type'
                }, {
                    title: '必填',
                    key: 'isRequired'
                }, {
                    title: '描述',
                    key: 'desc'
                }, {
                    title: '默认值',
                    key: 'defaultValue'
                }],
                table_01: [{
                    name: 'apiTicket',
                    type: 'string',
                    isRequired: '是',
                    desc: 'api访问凭证,根据授权所得',
                    defaultValue: '平台凭证',
                }],
                table_02: [{
                    name: 'projectId',
                    type: 'string',
                    isRequired: '是',
                    desc: '建设项目标识',
                    defaultValue: '',
                }],
                columns_03: [{
                    title: '代码',
                    key: 'name'
                }, {
                    title: '说明',
                    key: 'desc'
                }, {
                    title: '默认值',
                    key: 'defaultValue'
                }],
                table_03: [{
                    name: '1000',
                    desc: '成功',
                    defaultValue: '1000(小于1000则未成功)',
                }, {
                    name: '404',
                    desc: '权限不足',
                    defaultValue: '',
                }, {
                    name: '500',
                    desc: '服务未发现',
                    defaultValue: '',
                }, {
                    name: '503',
                    desc: '权限不足',
                    defaultValue: '',
                }, {
                    name: '100',
                    desc: '未知原因,统一日志标识: sc****0224',
                    defaultValue: '平台凭证',
                }]
            },
            mounted: function() {
                //折叠面板事件
                InitiateWidgets();

                this.formLeftIconLine();


                setTimeout(function() {
                    var csharpCodeStr = `public JsonResult QueryProjectInfo(QueryProjectInfoBody request)
{
    RequestHeader header = new RequestHeader();
    header.Controller = "mlsc";
    header.Action = "QueryProjectInfo";
    //header.Url = "http://192.168.253.229:88/mlsc/QueryProjectInfo";
    var apiReq = new HiApiFacadeRequest();
    apiReq.Header = header;
    apiReq.Body = request; //request.projectId="1001"
    var res = new HiApiHelper().ApiExcute<QueryProjectInfoResponse>(apiReq);
    return Json(res,JsonRequestBehavior.AllowGet);
}`;

                    var editor1 = CodeMirror.fromTextArea(document.getElementById("csharpCode"), {
                        value: csharpCodeStr,
                        height: 1000,
                        lineNumbers: true,
                        viewportMargin: Infinity,
                        mode: "text/javascript",
                        styleActiveLine: true,
                        // matchBrackets: true,
                        styleActiveLine: true,
                        // matchBrackets: true,
                        extraKeys: {
                            "F11": function(cm) {
                                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                            },
                            "Esc": function(cm) {
                                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                            }
                        }
                    });

                    editor1.setOption('value', csharpCodeStr);

                    var editor3 = CodeMirror.fromTextArea(document.getElementById("javaCode"), {
                        value: csharpCodeStr,
                        height: 1000,
                        lineNumbers: true,
                        viewportMargin: Infinity,
                        mode: "text/javascript",
                        styleActiveLine: true,
                        // matchBrackets: true,
                        styleActiveLine: true,
                        // matchBrackets: true,
                        extraKeys: {
                            "F11": function(cm) {
                                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                            },
                            "Esc": function(cm) {
                                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                            }
                        }
                    });

                    editor3.setOption('value', csharpCodeStr);

                    var jsonStr = `{
    projectId: '1001',
    proName: '年产1000辆专用车建设项目',
    proType: '新建',
    fileType: '报告书',
    opTime: '2017-11-11',
    opOrg: '南京大学环境规划设计研究院有限公司',
    allAmount: 6460,
    hbAmount: 220,
    industriesType: '交通运输',
    addr: '江苏省盐城市建湖县',
    remark: '该项目主要....'
}`;
                    var editor2 = CodeMirror.fromTextArea(document.getElementById("jsonCode"), {

                        height: 1000,
                        lineNumbers: true,
                        viewportMargin: Infinity,
                        mode: "text/javascript",

                        styleActiveLine: true,
                        // matchBrackets: true,
                        styleActiveLine: true,
                        // matchBrackets: true,
                        extraKeys: {
                            "F11": function(cm) {
                                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                            },
                            "Esc": function(cm) {
                                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                            }
                        }
                    });
                    editor2.setOption('value', jsonStr);

                }, 10);



            },
            methods: {
                toDebug: function() {
                    var url = '../coms-my/comViewer.htm';
                    if (window.parent.app.changePageUrl) {
                        window.parent.app.changePageUrl({
                            url: url,
                            menuName: "建议项目信息-调试",
                            menuPath: ["调试"]
                        });
                    } else {
                        windows.open(url);
                    }

                },
                toDemo: function() {
                    var url = '../coms-my/comRunner.htm';
                    if (window.parent.app.changePageUrl) {
                        window.parent.app.changePageUrl({
                            url: url,
                            menuName: "建议项目信息-示例",
                            menuPath: ["示例"]
                        });
                    } else {
                        windows.open(url);
                    }
                },
                changePageUrl: function(item) {
                    var a = window.parent.app.changePageUrl({
                        url: item.url,
                        menuName: item.menuName,
                        menuPath: [item.groupName]
                    });

                },
                tabClick: function(tab, index) {

                    _.each(this.tabsList, function(item) {
                        if (item.name != tab.name) {
                            item.active = false;
                        }
                        if (item.name == tab.name && item.active == false) {
                            item.active = true;
                        }
                    });

                    var _line = parseInt($(window).height() / 3);


                    $('body, html').animate({
                        scrollTop: $('.widgetShow .widget').eq(index).offset().top
                    }, 500);
                },
                searchBodyShowToggle: function(toVal) {
                    if (toVal == undefined) {
                        this.searchBodyShow = !this.searchBodyShow;
                    } else {
                        this.searchBodyShow = toVal;
                    }

                },
                formLeftIconLine: function() {


                    $(".form-wrap").resize(function() {
                        var rightWrap = $(".form-wrap").height();


                        $("#main-content .left").css({
                            height: rightWrap + 40 + 'px'
                        });

                    });
                    $(".form-wrap").trigger('resize');
                }

            }

        });
    </script>

</body>

</html>